<template>
  <div>
    <el-form class="query-table-form" :inline="true">
      <el-form-item>
        <el-date-picker
          class="date-picker-ml"
          v-model="queryDate"
          type="monthrange"
          align="right"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyyMM"
          @change="handleDateQuery"
        ></el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button @click="getData()">查询</el-button>
      </el-form-item>
      <div class="text-muted" v-loading="countLoading">
        <div>
          合计：开标数：
          <span class="text-danger">{{ countCode }}</span>
          ，企业数：
          <span class="text-danger">{{ countEnterprise }}</span>
        </div>
        单数：
        <span class="text-danger">{{ countInfo.p || '-' }}</span>
        笔。 担保金额：
        <span class="text-danger">{{ countInfo.p1 || '-' }}</span>
        万元。保费：
        <span class="text-danger">{{ countInfo.p2 || '-' }}</span>
        元 。
      </div>
    </el-form>

    <c-table border v-loading="loading" :columns="tableColumns" :data="tableData"></c-table>
    <div class="query-pagination">
      <div></div>
      <el-pagination
        layout="total, prev, pager, next, jumper"
        :current-page.sync="params.index"
        :page-size="params.size"
        :total="totalCount"
        @current-change="getData"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  components: {},
  props: {},
  data() {
    return {
      params: {
        index: 1,
        size: 15,
      },
      loading: false,
      countLoading: false,
      totalCount: 0,
      tableName: 'pay_fee_record_bank_total_bh',
      tableData: [],
      tableColumns: [
        { attrs: { label: '统计时间', prop: 'monthStr', align: 'center' } },
        { attrs: { label: '开标项目数', prop: 'guarantee_count', align: 'center' } },
        { attrs: { label: '单数', prop: 'project_count', align: 'center' } },
        { attrs: { label: '担保金额（万元）', prop: 'project_funds', align: 'center' } },
        { attrs: { label: '保费（元）', prop: 'gua_fee_total', align: 'center' } },
      ],
      queryDate: '',
      countInfo: {},
      countCode: '',
      countEnterprise: '',
    }
  },
  computed: {
    ...mapGetters(['clientId']),
  },
  watch: {},
  created() {
    this.params['service_id.eq'] = this.clientId
    this.getData()
  },
  mounted() {},
  methods: {
    handleDateQuery() {
      this.params['month_str.gte'] = ''
      this.params['month_str.lte'] = ''
      if (!this.queryDate || !this.queryDate.length) {
        this.getData()
        return
      }
      this.params['month_str.gte'] = this.queryDate[0]
      this.params['month_str.lte'] = this.queryDate[1]
      this.getData()
    },
    getCountData() {
      this.countLoading = true
      const { index, size, ...params } = this.params
      this.$api
        .getData(this.$serviceName, this.tableName, {
          ...params,
          groupFunc: `round(sum(project_count)),round(sum(project_funds)|2),round(sum(gua_fee_total)|2)`,
        })
        .then(res => {
          this.countInfo = res?.data?.[0] ?? {}
          return this.$api.getData(this.$serviceName, 'guarantee_project', {
            'pay_status.eq': 2,
            'service_id.eq': this.clientId,
            groupFunc:
              'count(distinct(guarantee_project.section_code)),count(distinct(guarantee_project.enterprise_name))',
          })
        })
        .then(res => {
          // 按照code去重
          this.countCode = res?.data?.[0]?.p ?? ''
          this.countEnterprise = res?.data?.[0]?.p1 ?? ''
        })
        .finally(() => {
          this.countLoading = false
        })
    },
    getData(index = 1) {
      this.params.index = index
      this.getCountData()
      this.loading = true
      this.$api
        .getData(this.$serviceName, this.tableName, this.params, { month_str: 'desc' })
        .then(res => {
          const data = res?.data ?? {}
          this.tableData = (data.data ?? []).map(this.dataAdapter)
          this.totalCount = data.totalCount ?? 0
        })
        .finally(() => {
          this.loading = false
        })
    },
    dataAdapter(row) {
      row.monthStr = row.month_str.slice(0, 4) + '.' + row.month_str.slice(4, 6)
      return row
    },
  },
}
</script>

<style lang="scss" scoped></style>
